<template>
    <div class="container">
        <div class="header">
            <Header></Header>
        </div>
        <div class="content">
            <div class="content-header">
                <div class="crumbs">首页 > 往届作品</div>
                <div class="title">
                    往届作品
                </div>
            </div>
            <img class="item1" src="./images/周金美 11岁 （紫气东来）.jpg" alt="">
            <div style="width: 55.8%;">
                <img class="item2" src="./images/袁子珺+11+《川西第一道观青羊宫》.jpg" alt="">
                <img class="item3" src="./images/石上流-15-《彝族》.jpg" alt="">
            </div>
            <div class="item4">
                <img src="./images/马一晴+9+山水清音.jpg" alt="">
                <img src="./images/丁杨婉咿 14岁 （峡江烟云）.jpg" alt="">
            </div>
            <button v-if="showButton" @click="showMore">展示更多学生作品</button>
            <div class="second" v-if="showMoreImgs">
                <img class="item1" src="./images/75.张孜怡+15+《万里长城》.jpg" alt="" loading="lazy">
                <div style="width: 61.3%;">
                    <img class="item2" src="./images/鲍浩萌  14岁      《卢舍那大佛》.jpg" alt="" loading="lazy">
                    <img class="item3" src="./images/刘跃陈 8岁 （华夏神龙）.jpg" alt="" loading="lazy">
                </div>
                <div style="width: 38.7%;">
                    <img class="item5" src="./images/116.洪章恩+10+敦煌印象.jpg" alt="" loading="lazy">
                    <img class="item6" src="./images/84.叶清朗+10+黄山奇松.jpg" alt="" loading="lazy">
                </div>
                <img class="item8" src="./images/16.王肖恩+11+我心中的合肥.jpg" alt="">
                <img class="item8" src="./images/马一菡-11-飞天梦.jpg" alt="">
            </div>
        </div>
        <div class="footer">
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'beforeTerm',
    data() {
        return {
            showMoreImgs: false,
            showButton: true,
        }
    },
    components: {
        Header, Footer
    },
    methods: {
        showMore() {
            this.showMoreImgs = !this.showMoreImgs;
            this.showButton = !this.showButton;
        }
    }
}
</script>
<style scoped>
.container {
    width: 100%;
}

.content {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.second {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.content-header {
    width: 100%;
}

.crumbs {
    margin: 3vw;
    margin-left: 10vw;
    font-size: 18px;
}

.title {
    width: 10vw;
    margin: 5vw auto;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-image: url('../../assets/images/all_title.png');
}

.item1 {
    width: 100%;
    animation: slideIn 2s forwards;
    opacity: 0;
    animation-delay: 0s;
}

.item2 {
    width: 100%;
    animation: slideOut 2s forwards;
    opacity: 0;
    animation-delay: 0.7s;
}

.item3 {
    width: 100%;
    animation: slideIn 2s forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.item4 {
    width: 44.2%;
    animation: slideOut 2s forwards;
    animation-delay: 2s;
    opacity: 0;
}

.item4 img {
    width: 100%;
}

.item5 {
    width: 100%;
    animation: slideIn 2s forwards;
    opacity: 0;
    animation-delay: 2s;
}

.item6 {
    width: 100%;
    opacity: 0;
    animation: slideOut 2s forwards;
    animation-delay: 2.5s;
}

.item8 {
    width: 50%;
    opacity: 0;
    animation: slideOut 2s forwards;
    animation-delay: 3s;
    margin-bottom: 5vw;
}

.footer {
    height: 15vw;
}

button {
    width: 40vw;
    height: 3vw;
    padding: 2px;
    border-radius: 2vw;
    margin: 3vw auto;
    color: #fff;
    font-size: 1.1vw;
    letter-spacing: 8px;
    box-shadow: 0px 0px 0px 5px rgb(231, 184, 55);
    border: 2px solid #fff;
    background-color: rgb(231, 184, 55);
    transition: transform 0.3s ease;
}

button:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* 动画定义 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30vh);
        /* 从下方滑入 */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* 最终回到正常位置 */
    }
}

@keyframes slideOut {
    from {
        opacity: 0;
        transform: translateY(-30vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 手机/小屏幕 */
@media screen and (max-width: 960px) {
    .crumbs {
        margin: 3vw;
        margin-left: 10vw;
        font-size: 12px;
    }

    .title img {
        width: 40vw;
    }

    .title {
        width: 40vw;
        margin-bottom: 3vw;
        font-size: 26px;
    }

    button {
        width: 60vw;
        height: 6vw;
        padding: 2px;
        border-radius: 3vw;
        margin: 3vw auto;
        color: #fff;
        font-size: 14px;
        letter-spacing: 6px;
        box-shadow: 0px 0px 0px 2px rgb(231, 184, 55);
        border: 2px solid #fff;
    }

    .footer {
        height: 30vw;
    }
}
</style>